<template>
  <div>
    <div>
        <el-dialog
            title="测点信息"
            :visible.sync="dialogVisible"
            width="50%"
            :showClose="false"
            >
            <div>
              <div>
                <template>
                  <el-select  clearable v-model="form.name"  placeholder="测点分组"   size="medium" style="margin-right: 10px;" @change="select">
                    <el-option class="select" v-for="(item,index) in xlalalist" :key="index" :label="item.text" :value="item.value"></el-option>
                  </el-select>
                  <el-input  placeholder="请输入测点名称搜索"
                  suffix-icon="el-icon-search" @keyup.enter.native="changeinput" v-model="input2"  style="width: 200px;height: 32px;" size="medium"></el-input>
                </template>
              </div>
              <div style="margin-top: 10px;">
                <template>
                  <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    height="450"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column
                      label="数据项标识"
                      prop="itemTag"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="itemName"
                      label="数据项名称"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="itemGroup"
                      label="数据项分组"
                      show-overflow-tooltip>
                      <template #default="{row}">
                        <span>{{ row.itemGroup==='1'?'负荷信息'
                        :row.itemGroup==='0'?'工况遥信'
                        :row.itemGroup==='6'?'电能信息'
                        :row.itemGroup==='8'?'环境信息'
                        :row.itemGroup==='9'?'电能质量'
                        :row.itemGroup==='7'?'电网矢量'
                        :row.itemGroup==='2'?'控制信息'
                        :row.itemGroup==='20'?'水热信息':'其他'}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="dataUnit"
                      label="数据单位"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="dataType"
                      label="数据类型"
                      show-overflow-tooltip>
                      <template #default="{row}">
                      <span>{{ row.dataType==='YC'?'遥测':row.dataType==='YX'?'遥信':'其他' }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </div>
            </div>
            <div style="height: 40px;display: flex; justify-content:space-between ;" >
              <span style="display: inline-block;" class="span">
                <template>
                  <el-form :model="form" :rules="rules" ref="form">
                    <el-form-item label="测点回路:" prop="itemLoop">
                    <el-select v-model="form.itemLoop" clearable  height="25" placeholder="请选择测点回路"   style="width: 200px;" size="mini" >
                      <el-option class="select" v-for="(item,index) in xlalalists" :key="index" :label="item.text" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  </el-form>
                </template>
              </span>
              <span slot="footer" class="dialog-footer" style="margin-right: 60px;" >
                <button class="dialogbutton sure" type="primary" @click="submit" style=" cursor: pointer;">确 定</button>
                <button class="dialogbutton" @click="quxiao" style=" cursor: pointer;">取 消</button>
              </span>
            </div>
          </el-dialog>
      </div>
  </div>
</template>

<script>
import { getxialafenzuapi, getcedianlistapi } from '@/api/eventtype'
import { cdhlxialaapi, postpiliangapi } from '@/api/measure'
export default {
  name: 'MaintenanceDialog',
  props: {
    row: {
      type: String
    }
  },
  data () {
    return {
      tableData: [],
      form: {},
      dialogVisible: false,
      xlalalist: [],
      xlalalists: [],
      val: '',
      input2: '',
      itemTag: [],
      rules: {
        itemLoop: [
          { required: true, message: '测点回路必填', trigger: 'blur' }
        ]
      }
    }
  },

  async mounted () {
    const ress = await cdhlxialaapi()
    this.xlalalists = ress.data.list
    this.$set(this.form,'itemLoop', ress.data.list[0].value)
    const res = await getxialafenzuapi({ dictType: 'MeasurementKind' })
    this.xlalalist = res.data.list

    this.getcedianlist()
  },
  methods: {
    async getcedianlist (val) {
      const res = await getcedianlistapi({ itemGroup: val })
      this.tableData = res.data.list
    },
    select (val) {
      this.val = val
      this.getcedianlist(val)
    },
    handleSelectionChange (val) {
      this.itemTag = val.map(ele => {
        return ele.itemTag
      })
    },
    changeinput () {
      this.tableData = this.tableData.filter(ele => ele.itemName.indexOf(this.input2) !== -1)
    },
    async submit () {
      await this.$refs.form.validate()
      if (!this.itemTag[0]) {
        this.$message.warning('请先勾选')
      } else {
        const res = await postpiliangapi({ meterType: this.row, itemLoop: this.form.itemLoop, itemTag: this.itemTag })
        this.dialogVisible = false
        this.itemTag = []
        this.getcedianlist(this.val)
        this.$emit('shuxing')
      }
    },
    quxiao () {
      this.dialogVisible = false
    }
  },
  watch: {
    input2 (val) {
      if (!val) {
        this.getcedianlist(this.val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer{
  margin-top: 10px !important;
  margin-left: 25px;
}

::v-deep .el-form-item{
  display: flex;
}
.sure{
  background-color: #1890ff;
  color: #fff;
  margin-right: 10px;
}
.dialogbutton{
  width: 70px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>
